@import 'elements.less';
/*@import 'iconic/iconic_stroke.css';*/
@import 'style/iconic/iconic_stroke.css';

// VARS
@headerHeight: 40px;
@headingTopMargin: 60px; // todo: fix for section>h2

@pageWidth: 700px;
@pagePadding: 50px;

@baseFontsize: 0.9em;

// FONTS
@font-face {
	font-family: 'IconicStroke';
	src: url('iconic/iconic_stroke.eot');
	src: local('IconicStroke')
		,url('iconic/iconic_stroke.svg#iconic') format('svg')
		,url('iconic/iconic_stroke.otf') format('opentype');
}

@font-face {
	font-family: 'vonRalstar';
	src: url('vonRalstar/vonralstar-regular-webfont.eot');
	src: url('vonRalstar/vonralstar-regular-webfont.eot?#iefix') format('embedded-opentype'),
		 url('vonRalstar/vonralstar-regular-webfont.woff') format('woff'),
		 url('vonRalstar/vonralstar-regular-webfont.ttf') format('truetype'),
		 url('vonRalstar/vonralstar-regular-webfont.svg#vonRalstarRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}

// BASE

* {
	font-family:  Arial, sans;
	-moz-box-sizing: border-box; box-sizing: border-box;
}
body, html {
	margin: 0px;
	padding: 0px;
}
body {
    font-size: 16px;
    @introHeight: 400px;
	.gradientVerticalThree(#888888,#e5e5e5,#fafafa,0,@headerHeight+@introHeight,@headerHeight+@introHeight+150px);
	background-repeat: repeat-x!important;
}

// general
h2,h3{ position:relative; }
h2 {
	font-size: 1.2em;
	font-weight: normal;
	color: #000;
}
h3 {
	font-size: .9em;
	color: #444;
	clear:both;
	margin-top: @headingTopMargin;
}

p {
	font-size: @baseFontsize;
	line-height: 1.4em;
	&:first-child {
		margin-top: 0;
	}
}

a {
	text-decoration: underline;
	color: #203C90;
	cursor: hand;
	cursor: pointer;
}

textarea, select {
	vertical-align: top;
}

ul {
	list-style: square;
	font-size: @baseFontsize;
	lh { font-weight: bold; }
}

table {
	border: 1px solid #CCC;
	background-color: #FAFAFA;
	border-spacing: 0;
	thead {
	}
	table {
		width: 100%;
	    background-color: transparent;
		border: 1px solid #DDD;
	}
	tr:nth-child(odd) {
		background-color: #F0F0F0;
	}
	tr:nth-child(even) {
		background-color: #FAFAFA;
	}
	th, td {
		padding: 2px 5px 2px 5px;
		font-size: .7em;
		padding-right: 20px;
		vertical-align: top;
		th, td {
			font-size: 1em;
		}
	}
	th {
		color: #000;
		text-align: left;
		border-bottom: 2px solid #DDD;
		.gradientVertical(#EEE,#DDD);
		/*background-color: #DDD;*/
	}
	tbody td:first-child {
		color:#A11;
		font-weight: bold;
	}
	tfoot {
		th,td { background-color: #DDD; }
	}
}

del,strike,.striked {
	text-decoration: none;
	background: url() 0 3px repeat-x;
}

.clear {
	clear: both;
}

pre, code {
    position: relative;
	font-size: .9em;
	&,*{
	    font-family: monospace;
		color: #4C440B;
	}
	&.css{
		height: 150px;
	}
	background-color: #FFD;
	border: 1px solid #CC8;
	padding: 10px 15px 10px 15px;
	overflow: hidden;
	.shadowBox(inset 2px 4px 16px 0 #F3F3C8);
	.cornerRounded(3px);
	&:hover { overflow: auto; }
	select {
		border: 1px solid #DEDE94;
		background-color: #F3F3C8;
		-webkit-appearance:none;
		cursor:pointer;
		.shadowBox(1px 2px 4px 0 #F3F3C8);
		.cornerRounded(5px);
		&[value=default] {
		    font-weight: bold;
			color: blue;
		}
		option[value=default] {
			color: red;
		}
	}
	input, textarea {
		background-color: #FFFFEA;
		border: 1px solid #DEDE94;
		&[type=number] {
			width: 60px;
		}
	}
	label {
		color: #800;
	}
}


.alert {
	background-color: #FE0;
	color: #000;
	padding: 10px;
	font-weight: bold;
}

.button, button {
	display: inline-block;
	margin: 5px 10px 15px 0;
	padding: 5px 8px 6px;
	font-size: .9em;
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
	.cornerRounded(6px);
	text-shadow: 0 -1px 2px rgba(0,0,0,0.5);
	.shadowBox(1px 2px 8px rgba(0,0,0,0.3));
	&:hover { .shadowBox(1px 1px 2px rgba(0,0,0,0.5)); }
	&.small {
	    color: #EEE;
	    line-height: .7em;
	}
	small {
		font-size: .6em;
		text-shadow: 0 0 0;
	}
	&.download {
		color: #fff;
		.gradientVertical(#7db9e8,#1e5799);
		border: 1px solid #A00;
		text-align: center;
		&:hover {
		    .gradientVertical(#6190B3,#1e5799);
			border: 1px solid #F00;
	    }
	}
	&.wordpress:before {
	    font-family: 'vonRalstar';
		content: 'w';
		font-size: 1.5em;
		line-height: .5em;
		position: relative;
		top: .2em;
	}
	&.code {
		margin: 0 10px 15px 0;
		padding: 6px 8px;
		.gradientVertical(#F3F3C8,#DEDE94);
		border: 1px solid #CC8;
		color: #4C440B;
		text-shadow: 0 -1px 2px #FFF;
	}
	/*&.copy {
	    position: absolute;
	 	right: -1px;
	 	top: -1px;
		margin: 0;
		padding: 2px 2px;
		.gradientVertical(#F3F3C8,#DEDE94);
		.cornerRounded(3px);
		.shadowBox(0 0 0 #000);
		border: 1px solid #CC8;
		color: #4C440B;
		font-size: .6em;
		text-shadow: 0 0 0;
	}*/
}

/*.repo {
    @colorRepo: #C7E2ED;
    @colorBorder: darken(@colorRepo, 40%);
	display: inline-block;
	padding: 0 6px;
	background: lighten(@colorRepo, 5%);
	.cornerRounded(5px);
	border: 1px solid @colorBorder;
	overflow: hidden;
	color: darken(@colorRepo, 60%);
	font-weight:bold;
	white-space: nowrap;
	text-decoration: none;
	&:before { content:attr(data-type)': '; }
	&:hover { overflow: visible; width: auto; }
	span {
		display: inline-block;
		min-width: 100%;
		padding: 5px 8px 6px;
		margin: -1px 2px;
		text-decoration: underline;
		font-weight:normal;
		background: @colorRepo;
		.shadowBox(inset 2px 2px 6px 0 #A7BEC7);
		.cornerRadius(5px,5px);
		border: 1px solid @colorBorder;
		border-left: 0;
	}
}*/
.repo {
    @colorRepo: #C7E2ED;
    @colorBorder: darken(@colorRepo, 40%);
    @colorShade: #A7BEC7;
	display: inline-block;
	overflow: hidden;
	margin: 5px 0;
	padding: 5px 5px 6px 0;
	border: 1px solid @colorBorder;
	.cornerRounded(5px);
	.shadowBox(inset 2px 2px 6px 0 @colorShade);
	background: @colorRepo;
	color: darken(@colorRepo, 60%);
	white-space: nowrap;
	/*text-decoration: underline;*/
	text-decoration: none;
	&:before {
		margin: 0 10px 0 0;
		padding: 5px 8px 6px;
		background: lighten(@colorRepo, 5%);
	    content:attr(data-type)': ';
		font-weight:bold;
//		border-right: 1px solid @colorShade;
		border-right: 1px solid lighten(@colorRepo, 10%);
		.shadowBox(2px 2px 6px 0 @colorShade);
		.cornerRadius(0,0,5px,5px);
	}
	&:hover { overflow: visible; width: auto!important; }
}

.column {
	.columns(45%, 2, 10%, #EEE, solid, 0);
}

.hiddenAnchor {
    @top: -@headerHeight - @headingTopMargin;
	position: absolute;
	top: @top;
}


// layout

header {
	position: fixed;
	top: 0px;
	width: 100%;
	height: @headerHeight;
	margin: 0 auto;
	z-index: 100;
	/*.gradientVertical(#525252,#2f3130);*/
	.gradientVertical(#525252,#2f3130);
	div {
		width: @pageWidth+2*@pagePadding;
		height: 100%;
		margin: 0 auto;
	}
	h1 {
		@logoPadding: 43px;
		@topMargin: @headerHeight/7;
		float: left;
		margin: @topMargin 0 0 @pagePadding - @logoPadding;
		padding-left: @logoPadding;
		height: @headerHeight - @topMargin;
		font-weight: normal;
		font-size: 1.3em;
		line-height: 1.5em;
		color: #fff;
		background: url(logo.png) 0 1px no-repeat;
		cursor: hand;
		cursor: pointer;
		small { font-size: 0.55em; }
	}
	nav {
		float: right;
		margin: 0 @pagePadding 0 0;
		ul {
		    @liMargin: 6px;
			list-style: none;
			margin: 0 -@liMargin 0 0;
			padding: 0;
			text-align: right;
			li {
				position: relative;
				display: inline-block;
				margin: 0;
				padding: 0;
				a {
					display: inline-block;
					font-size: 1.05em;
					line-height: @headerHeight;
					padding: 0 @liMargin;
					color: #fff;
					font-weight:bold;
					text-decoration: none;
					&:hover { .gradientVertical(#2f3130,#525252); }
					&[href="#"] {
						font-size: .7em;
						font-family: vonRalstar;
						&:before { content: 'u'; }
						&:hover { background: none; }
					}
				}
				ul {
					display: none;
					position: absolute;
					top: @headerHeight;
					left: 0;
					padding-bottom: 10px;
					background-color: #2f3130;
					.shadowBox(1px 2px 8px rgba(0,0,0,0.4));
					text-align: left;
					li {
						display: block;
						a {
							display: inline;
							height: auto;
							line-height: 2em;
							display: block;
							padding: 0 8px;
							white-space: nowrap;
							font-size: .9em;
							&:hover { .gradientVertical(#525252,#2f3130); }
/* no cigar in IE
border:3px solid green;
color: #000;
background-color: #FFF;
.opacity(1);
height: 10px;
*/
						}
					}
				}
				&:hover ul { display: block; }
			}
		}
	}
}

#intro {
	@introTop: 30px;
    font-size: 1.2em;
    margin-top: @headerHeight;
    color: #220;
    strong { color: #1F5899; }
    em { color: #660;  }
	/*.gradientVertical(#F2F7E2,#D3E795);*/
	.gradientVertical(#F2F7E2,#D3E795);
	border-bottom: 4px dashed #A6C34E;
	>div {
		position: relative;
    	padding: 0 @pagePadding @introTop;
		width: @pageWidth;
		margin: 0 auto;
	 	>div {
    		padding-top: @introTop;
			float: left;
			width: 60%;
		}
		>aside {
			float: right;
			width: 35%;
   			h2,h3 {
   			    color: #1F5899;
   				margin: 20px 0 5px;
   			}
   			h2:first-child,h3:first-child {
   				width: 100%;
   				margin: 0 0 15px;
   			    color: #CCC;
				.gradientVertical(#2f3130,#1A1B1B);
   				font-size: .7em;
   				line-height: 2em;
   				font-weight:bold;
   				text-align: center;
   				.cornerRadius(0,6px,6px,0);
   			}
   			.repo {
   			    font-size: .6em;
				width: 100%;
   		    }
			.button.download {
				width: 100%;
			}
			ul { font-size: .7em; }
		}
		ul {
		    @indent: 1.5em;
			margin: 0 0 1em;
			padding-left: 0;
			list-style: none;
			li {
			    line-height: 1.4em;
				margin: 0;
				padding: 0 0 0 @indent;
				&:before {
				    position: relative;
					top: -.25em;
				    display: inline-block;
					width: @indent;
					margin-left: -@indent;
				    font-family: 'IconicStroke';
					content: '\2795';
					font-size: .7em;
					line-height: 1em;
					color: #A6C34E;
				}
		    }
		}
	}
	.flattrBox {
		position: absolute;
		right: -60px;
		top: 30px;
	}
}

#page {
	width: @pageWidth;
	margin: 0 auto;
	padding: 10px @pagePadding 50px;
	background-color: #fff;

	h2 {
		border-bottom: 1px solid #aaa;
	}
	h3 {
		border-bottom: 1px dashed #aaa;
	}
	img {
		margin-left: 20px;
	}
	section {
	    position: relative;
		padding-top: 50px;
		&:first-child { padding-top: 10px; }
	}
}

// footer
footer {
	width: 100%;
	background: #242424;
	border-top: 1px solid #242424;
	div {
		margin: 0 auto;
		padding: 5px 50px 5px 50px;
		width: 700px;
		font-size: .7em;
		color: #fff;
		a { color: #fff; }
	}
}